<template>
	<div class="content">
		<div class="nav">
			作业列表
			<div class="history" @click="toHitory">
				作业记录
			</div>
		</div>
		<div class="homeBox" v-for="x in homeWorkList">
			<div class="left">
				<div class="coursename">
					{{ x.coursename }}作业
				</div>
				<div class="testname">
					{{ x.assignmentname }}&nbsp;&nbsp;&nbsp;{{ x.assignmentnums }}题
				</div>
				<div class="cutdate">
					截止日期：{{ x.validtime }}
				</div>
			</div>
			<div class="right" @click="exercise(x)"></div>
		</div>
		<div v-if="homeWorkList.length==0" class="noData">
					你没有新的作业哟
		</div>
		<FooterMsg></FooterMsg>
	</div>
</template>

<script>
	import FooterMsg from '../../components/FooterMsg'
	import api from '../../api'
	import { mapState, mapMutations } from 'vuex'
	import $ from 'jquery'
	import { Indicator, Toast, Picker } from 'mint-ui';
	export default {
		components: {
			FooterMsg
		},
		data() {
			return {
				homeWorkList: [
				]
			}
		},
		created() {
			this.INIT_STATE();
			var that = this
			//获取未提交的作业记录
			api.getStudentAssignmentList({
				courseid: 0,
				studentid: this.userlogin.uid,
				classid: this.userlogin.classid,
				assignmentid: 0,
				recordid: 0,
				dayfrom: 0,
				dayto: 0,
				type: 0
			}).then(response => {
				that.homeWorkList = response.data.data
			})
			$(function() {
				var h = document.body.clientHeight;
				$('.content').css('min-height', h - 50 + 'px')
			})

		},
		activated(){
			var that = this
			//获取未提交的作业记录
			api.getStudentAssignmentList({
				courseid: 0,
				studentid: this.userlogin.uid,
				classid: this.userlogin.classid,
				assignmentid: 0,
				recordid: 0,
				dayfrom: 0,
				dayto: 0,
				type: 0
			}).then(response => {
				that.homeWorkList = response.data.data
				that.homeWorkList.forEach(function(v){
					v.validtime=v.validtime.slice(0,16)
				})
			})
		},
		computed: {
			...mapState(['userlogin', 'exerciseInfo'])
		},
		methods: {
			...mapMutations(['INIT_STATE', 'EXERCISE_ADD']),
			exercise(x) {
				var ctime = Number(x.ctime)
				var dtime = (new Date()).getTime()
				console.log(ctime)
				console.log(dtime)
				//如果当前时间超过了截止日期那么就提示
				if(dtime > ctime) {
					Toast('交作业时间已过了，下次抓紧哦')
				} else {
					this.EXERCISE_ADD({
						source_url: '/homework',
						assignmentid: x.assignmentid,
						homeworkType: x.type,
						recordid:x.recordid,
						coursename: x.coursename,
						aid: x.id
					})
					this.$router.push({
						path: '/exercise'
					})
				}
			},
			toHitory() {
				this.$router.push({
					path: '/homeworkHistory'
				})
			}
		}

	}
</script>

<style scoped>
	.content {
		/*padding-top: 0;*/
	}
	
	.nav {
		box-sizing: border-box;
		width: 100%;
		font-size: 15px;
		color: #4A4A4A;
		padding-left: 0.4rem;
		padding-right: 0.4rem;
		text-align: left;
		position: relative;
		text-align: center;
		font-weight: bold;
		background: white;
		position: fixed;
		top: 0;
	box-shadow: 0px -1px 3px 1px rgba(0,0,0,0.2);
		line-height: 36px;
		height: 36px;
	}
	
	.nav>.history {
		font-size: 14px;
		color: #FA8C13;
		border: 1px solid #FA8C13;
		border-radius: 8px;
		position: absolute;
		right: 0.4rem;
		top: 7px;
		font-weight: 100;
		width: 1.6rem;
		height: 22px;
		text-align: center;
		line-height: 22px;
	}
	
	.homeBox {
		width: 6.4rem;
		height: 111px;
		margin-top: 20px;
		background-color: white;
		margin-left: 0.4rem;
		margin-right: 0.4rem;
		display: flex;
	}
	
	.homeBox>.left {
		flex: 6;
		overflow: hidden;
		font-size: 14px;
		color: #999999;
		text-align: left;
		text-indent: 0.24rem;
	}
	
	.homeBox>.right {
		flex: 4;	
		height: 100%;
		background: url(../../assets/images/dohomework.png) no-repeat center 30px;
		background-size: 80%;
	}
	
	.homeBox>.left>.coursename {
		font-size: 16px;
		color: #4A4A4A;
		margin-top: 15px;
		font-weight: bold;
	}
	
	.homeBox>.left>.testname {
		margin-top: 14px;
		font-size: 12px;
	}
	
	.homeBox>.left>.cutdate {
		margin-top: 10px;
		font-size: 12px;
		overflow: hidden;
	}
	.noData {
		height: 250px;
		background: url(../../assets/images/noData.png) no-repeat center;
		background-size: 77px;
		color: #3C3C3C;
		font-size: 14px;
		line-height: 400px;
	}
</style>